import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
} from 'react-native';
import Link from '../components/Link';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  icon: {
    width: 24,
    height: 24,
  },
});
// avatar_vip.png
export default class MyMovies extends Component {
  static navigationOptions = {
    drawerLabel: '我的',
    title: '我的',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('../img/avatar_vip.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  }

  render() {
    return (
      <View style={styles.container}>
        <Link pushPage={'IntrouduceMobx'} navigation={this.props.navigation}>1 - Introduce mobx</Link>
        <Link pushPage={'Counter'} navigation={this.props.navigation}>2 - Counter</Link>
        <Link pushPage={'ToDoList'} navigation={this.props.navigation}>3 - ToDoList </Link>
        <Link pushPage={'LoginForm'} navigation={this.props.navigation}>4 - LoginForm</Link>
      </View>
    );
  }
}
